import React, { useEffect, useState } from "react";
import "@/layouts/components/Header.css";
import Login from "@/pages/Login";
import { Search } from "@react-vant/icons";
const newData = [
  { title: "免费模版" },
  { title: "开通会员" },
  { title: "产品服务" },
  { title: "解决方案" },
  { title: "内容中台" },
  { title: "资源与合作" },
];
const selectList = [
  { title: "全部" },
  { title: "H5" },
  { title: "海报" },
  { title: "长页" },
  { title: "表单" },
];
function Header() {
  const [showBox, setShowBox] = useState(false);
  useEffect(() => {
    function handleScroll() {
      // 设置一个阈值,例如当页面滚动超过70px时显示盒子
      if (window.scrollY > 70) {
        setShowBox(true);
      } else {
        setShowBox(false);
      }
    }
    // 添加事件监听器
    window.addEventListener("scroll", handleScroll);
    // 清除函数，用于在组件卸载时移除事件监听器
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []); // 注意这里的空依赖数组，意味着这个effect只会在组件挂载和卸载时运行

  return (
    <div>
      <div className="header_logo">
        <div className="logo">
          <img
            src="https://lib.eqh5.com/eqx.layout/images/new_logo.svg"
            alt=""
          />
        </div>
        <div className="nav_com">
          <ul>
            {newData &&
              newData.map((item, index) => {
                return <li key={index}>{item.title}</li>;
              })}
          </ul>
        </div>
        <div className="Login">
          {showBox && (
            <div className="SEARCH">
              <div className="search_left">
                <select>
                  {selectList.map((item) => {
                    return <option value="">{item.title}</option>;
                  })}
                </select>
              </div>
              <div className="search_con">
                <input type="text" placeholder="全部" />
              </div>
              <div className="search_right">
                <Search />
              </div>
            </div>
          )}
        </div>
         <div className="conmed">
            <Login></Login>
          </div>
      </div>
    </div>
  );
}

export default Header;
